<!-- 产品列表 -->
<template>
  <div class="app-container detailbox">
    <div class="partnumber-tit">
      <h2 class="mod_title">型号详细</h2>
      <!-- <el-button type="primary" plain class="el-icon-warning" @click="handfeedback">错误反馈</el-button> -->
    </div>
    <el-form ref="model" :model="model" label-width="200px" v-loading="Loading">
      <div class="partnumber-con">
        <div class="partnum-left">
          <el-row>
            <el-col :span="12">
              <el-form-item label="型号名称：">{{model.PartNumber}}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="生产状态：">{{productionstatusFilter(model.ProductionStatus)}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" class="long">
              <el-form-item label="所属分类：">
                <el-cascader v-model="model.CategoryArr" :props="treeprop" :options="treeoptions" class="classify" disabled filterable></el-cascader>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" class="long">
              <el-form-item label="应用行业：">{{model.IndustryID}}</el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="创建日期：">{{model.CreateDate}}
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div class="partnum-right">
          <el-row style="width: 150px">
            <el-image v-if="this.model.Image" :src="this.model.Image" :preview-src-list="[this.model.Image]" />
          </el-row>
        </div>
      </div>
      <el-divider></el-divider>
      <h3 class="mod_title">基础属性</h3>
      <div class="nature">
        <el-row>
          <el-col :span="12">
            <el-form-item label="品牌：">{{model.BrandName}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="制造商：">
              {{model.Manufacturer}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="MPQ：">
              {{model.MPQ}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="MOQ：">
              {{model.MOQ}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="包装：" maxlength="50">
              {{model.Packing}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="封装：" maxlength="50">
              {{model.Package}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="long">
            <el-form-item label="型号描述：" prop="Description">
              <!-- <el-input v-model="model.Description" type="textarea" autosize class="long" maxlength="1000" disabled /> -->
              <div>{{model.Description}}</div>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
    <el-divider></el-divider>
    <el-form v-if="group.length>0" label-width="200px">
      <div>
        <div v-for="(item,index) in group" :key="index">
          <h3 class="mod_title">{{item.Name}}</h3>
          <div class="componentbox">
            <el-row class="componentitem" v-for="(prop,propidx) in item.properties" :key="propidx">
              <el-col :span="12">
                <el-form-item :label="prop.Name+':'" :prop="prop.PropertyID">
                  {{prop.Text}}
                </el-form-item>
              </el-col>

            </el-row>
            <el-divider></el-divider>
          </div>
        </div>
      </div>
    </el-form>
    <!-- <el-divider></el-divider> -->
    <h3 class="mod_title">文件</h3>
    <div class="div-block">
      <FileUpload ref="FileUpload" :isReadonly="false"></FileUpload>
    </div>
    <!--别名管理-->
    <el-divider></el-divider>
    <h3 class="mod_title">型号别名</h3>
    <ul class="namecon">
          <li class="nameitem">青花瓷</li>
           <li class="nameitem">the show</li>
        </ul>
    <el-divider></el-divider>
    <h3 class="mod_title">客户内部零件编号</h3>
      <el-table
     :data="tableData"
     border
    style="width: 100%">
    <el-table-column
      prop="date"
      label="客户"
    >
    </el-table-column>
    <el-table-column
      prop="name"
      label="编号"
    >
    </el-table-column>
  </el-table>
    <!--渠道管理-->
    <el-divider></el-divider>
    <h3 class="mod_title">供应渠道</h3>
      <el-table
     :data="tableData"
     border
    style="width: 100%">
    <el-table-column
      prop="date"
      label="渠道"
    >
    </el-table-column>
    <el-table-column
      prop="name"
      label="名称"
    >
    </el-table-column>
  </el-table>
  
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { getnormaltree, getEnumerate } from '../../api/category.js';
import {  Details } from '../../api/mark.js';; 
import FileUpload from '@/components/FileUploader.vue';
let defaultmodel = {
  ID: undefined,
  ProductID: undefined,
  PartNumber: undefined,
  Description: undefined,
  CategoryID: undefined,
  CategoryArr: undefined,
  BrandID: undefined,
  MPQ: undefined,
  Package: undefined,
  Packing: undefined,
  IndustryID: undefined,
  Datasheet: undefined,
  Specification: undefined,
  CreateDate: undefined,
  Status: 200,
  Image: undefined,
  FromID: undefined,
  groups: [],
  files: []
};
export default {
  components: {FileUpload},
  data() {
    //这里存放数据
    return {
      open: false,
      Loading: true,
      partnumID: undefined,
      value: [],
      group: [], //分组
      orgcatid: undefined,
      productionstatusoption: [], //生产状态下拉
      treeoptions: [],
      treeprop: { value: 'id', label: 'label', children: 'children' },
      model: Object.assign({}, defaultmodel),
       tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          
        }, {
          date: '2016-05-04',
          name: '王小虎',
         
        }, {
          date: '2016-05-01',
          name: '王小虎',
        
        }, {
          date: '2016-05-03',
          name: '王小虎',
      
        }],
      Feedback: {
        ID: undefined,
        Name: undefined,
        FeedbackType: undefined,
        FeedbackText: undefined,
        FromID: undefined
      }
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    productionstatusFilter(value) {
      return this.selectDictLabel(this.productionstatusoption, value);
    },
   
    Cancelfeedback() {
      this.open = false;
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    getnormaltree().then(res => {
      this.treeoptions = res.data;
    });
    getEnumerate(['ProductionStatus']).then(res => {
      this.productionstatusoption = res.data.ProductionStatus;
    });
    if (this.$route.query.id) {
      Details(this.$route.query.id).then(res => {
        // console.log(res);
        this.model = res.data;
        console.log(this.model);
        this.group = this.model.groups;
        this.Loading = false;
        this.$nextTick(() => {
          this.partnumID = this.model.ProductID;
          this.$refs.FileUpload.initPage(this.partnumID, this.isDeleteShow, this.isUploadShow);
      
        });
      });
    } else {
      this.Loading = false;
    }
  }
};
</script>
<style scoped>
@import './../../assets/reset.css';
.mod_title {
    font-size: 17px;
}
.mod_title::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 16px;
    background-color: #286af6;
    vertical-align: middle;
    overflow: hidden;
    margin: -3px 4px 0 0;
}
.detailbox .el-row {
  width: 100%;
}
.detailbox .partnumber-con {
  display: flex;
}
.detailbox .partnum-left {
  width: 70%;
}
.classify {
  width: 80%;
}

.partnumber-tit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.partnumber-tit .el-button--primary.is-plain {
  font-size: 16px;
}
.partnumber-tit .el-icon-warning:before {
  color: #f00;
  margin-right: 5px;
}
.detailbox .mod-title {
  margin-bottom: 15px;
}
.detailbox .nature {
  width: 70%;
}
.componentbox {
  width: 70%;
  display: flex;
  flex-wrap: wrap;
}
.componentbox .componentitem {
  width: 50% !important;
}
.center {
  margin: auto;
  width: 50%;
  border: 3px;
  padding: 10px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
/deep/ label {
  font-weight: normal;
  color: #a0a0a1;
  text-align: left;
}

/deep/ .el-image__error {
  padding: 4px 10px;
}
.namecon{
  width: 100%;
  display: flex;
  font-size: 15px;
  flex-wrap: wrap;
  cursor: pointer;
}
.nameitem{
    padding: 7px 18px;
    line-height: 20px;
    font-size: 14px;
    color: #666D79;
  border: 1px solid #D7D7D7;
  box-sizing: border-box;
}

</style>